<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>截取区域</title>
  <style>
    /* 遮罩层是固定的   */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
    }
    /*矩形区域是可以移动的, 所以设置成剧毒定位*/
    #rectangle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      border: 1px solid #fff;
      display: none;
    }
    /*矩形区域头部的信息区域*/
    #rectangle .info {
      position: absolute;
      top: 0;
      right: 0;
      padding: 5px;
      background-color: #fff;
      color: #000;
      font-size: 12px;
    }
  </style>
</head>
<body>
<button id="button">截取区域</button>

<div id="overlay"></div>
<div id="rectangle"></div>

<script>
  // 按钮事件
  document.getElementById('button').onclick = function() {
    // 显示遮罩层
    document.getElementById('overlay').style.display = 'block';

    // 初始化矩形
    var rectangle = document.getElementById('rectangle');
    rectangle.style.display = 'block';
    updateInfo(rectangle);

    // 鼠标按下事件 --- 确认绘制的起点位置作为矩形的左上角原点
    var isMouseDown = false;
    var startX, startY;
    document.addEventListener('mousedown', function(e) {
      isMouseDown = true;
      startX = e.clientX;
      startY = e.clientY;
    });

    // 鼠标移动事件
    document.addEventListener('mousemove', function(e) {
      if (isMouseDown) {
        // 更新矩形大小
        var x = e.clientX - startX;
        var y = e.clientY - startY;
        if (x > 0) { // 向左边鼠标移动
          rectangle.style.width = x + 'px';
        }
        if (y > 0) { // 向下方鼠标移动
          rectangle.style.height = y + 'px';
        }

        // 更新矩形位置
        rectangle.style.left = e.clientX + 'px';
        rectangle.style.top = e.clientY + 'px';

        // 更新信息
        updateInfo(rectangle);
      }
    });

    // 鼠标抬起事件
    document.addEventListener('mouseup', function() {
      isMouseDown = false;
    });
  };

  // 更新矩形信息
  function updateInfo(rectangle) {
    var info = rectangle.querySelector('.info');
    if (!info) {
      info = document.createElement('div');
      info.className = 'info';
      rectangle.appendChild(info);
    }
    info.textContent = '位置：' + rectangle.style.left + ', ' + rectangle.style.top + '\n' + '大小：' + rectangle.style.width + ' x ' + rectangle.style.height;
  }

</script>
</body>
</html>
